<template>
  <div class="recommend">
    <div class="re_title">
      <span class="re_title_text">为您推荐</span>
    </div>
    <div class="re_list">
      <ul class="list">
        <li>
          <div class="cover">
            <img
              src="http://www.beatsbd.com/images/201808/source_img/374_P_1535426179725.jpg"
              alt=""
            />
          </div>
          <div class="info">
            <div class="name">
              Beats solo3 wireless 蓝牙耳机头戴式 无线耳机/耳麦
              桀骜黑红（十周年纪念款）
            </div>
          </div>
          <div class="price">¥ <span>1498</span></div>
        </li>
        <li>
          <div class="cover">
            <img
              src="http://beatsbd.com/images/201804/thumb_img/336_thumb_G_1524066914079.jpg"
              alt=""
            />
          </div>
          <div class="info">
            <div class="name">
              Beats X 蓝牙无线 入耳式耳机 带麦可通话 -桀骜黑红（十周年版）
              MRQA2PA/A
            </div>
          </div>
          <div class="price">¥ <span>799</span></div>
        </li>
        <li>
          <div class="cover">
            <img
              src="https://nb.scene7.com/is/image/NB/cn_ml999kgp_nb_03_i?$pdpPictZoom$"
              alt=""
            />
          </div>
          <div class="info">
            <div class="name">
              New Balance NB官方2019新款男鞋女鞋ML999KGP休闲鞋运动鞋
              米白色(桔黄色 浅灰色) ML999KGP 42
            </div>
          </div>
          <div class="price">¥ <span>999</span></div>
        </li>
        <li>
          <div class="cover">
            <img
              src="https://dsfs.oppo.com/archives/201905/201905291105315cedf773cdf73.png?x-oss-process=image/format,webp"
              alt=""
            />
          </div>
          <div class="info">
            <div class="name">
              OPPO Reno 10倍变焦版 高通骁龙855 4800万超清三摄 6GB+128GB 雾海绿 全网通 全面屏拍照游戏智能手机
            </div>
          </div>
          <div class="price">¥ <span>2799</span></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "CenterRecommend",
  data() {
    return {

    }
  },
  components: {

  }
}
</script>

<style scoped lang="stylus">
.recommend
    .re_list
      position relative
      overflow hidden
      background #ffffff
      .list
        display flex
        overflow: hidden;
        background: #f7f7f7;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        vertical-align: baseline;
        li
          list-style: none;
          background: #fff;
          position: relative;
          float: left;
          width: 50%;
          margin-bottom: 1px;
          padding: 15px 15px 0;
          box-sizing: border-box;
          .cover
            position relative
            overflow hidden
            padding-top 100%
            height 0
            img
              position absolute
              max-width 100%
              max-height 100%
              top 50%
              left 50%
              transform translate(-50%,-50%)
          .info
            margin-top 6px
            font-size 12px
            color #333
            line-height 18px
            height 36px
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            -webkit-line-clamp 2
            -webkit-box-orient vertical
          .price
            font-size 12px
            color #e93b3d
            margin-right 3px
            line-height 40px
            span
              font-size 16px
    .re_title
      position relative
      margin 15px 0
      height 1em
      line-height 1em
      text-align center
      font-size 12px
      color #999
      &::after
        content ""
        position absolute
        z-index 1
        pointer-events none
        background-color #ccc
        height 1px
        right 0
        top 0
        left 10px
        right 10px
        top 54%
      .re_title_text
        z-index 2
        position relative
        padding 0 15px
        background-color #f0f2f5
        &::before
          content ""
          position absolute
          top 51%
          left 0
          margin-top -2px
          width 4px
          height 4px
          background-color #ccc
          transform rotate(45deg)
        &::after
          content: "";
          position: absolute;
          top: 51%;
          right: 0;
          margin-top: -2px;
          width: 4px;
          height: 4px;
          background-color: #ccc;
          transform: rotate(45deg)
</style>
